<template>
	<div class="building">
		<van-pull-refresh v-model="state.refresh" @refresh="onRefresh">
			<van-list
				:loading="state.loading"
				:finished="state.finished"
				:finished-text="state.list?.length !== 0 ? '———— 已经到底了哦 ————' : '' "
				@load="getList"
			>
				<div class="lists" v-if="state.list?.length">
					<component
						:is="houseItem"
						v-for="item in state.list"
						:key="item.fwbh"
						:details="item"
						:active="buildingInfo.fwbh"
						@click="chooseHose(item)"
					/>
				</div>
				<component
					:is="empty"
					v-if="!state.list?.length && !state.loading"
				/>
			</van-list>
		</van-pull-refresh>
	</div>
</template>

<script setup>
import { buildingList, getMonthNumber } from '@/service/api'
import { nextTick, onMounted, reactive, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import houseItem from './components/houseItem'
import empty from '@/components/empty'
import { useBuildingStore, useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
import { Dialog, Toast } from 'vant'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const buildingStore = useBuildingStore()
const { buildingInfo } = storeToRefs(buildingStore)

const route = useRoute()
const router = useRouter()
const state = reactive({
	list: [],
	page: 1,
	pageSize: 10,
	total: 0,
	refresh: false,
	loading: false,
	finished: false
})

const onRefresh = () => {
	state.list = []
	state.page = 1
	state.refresh = false
	state.loading = false
	state.finished = true
	nextTick(() => {
		state.finished = false
	})
}

const getList = async () => {
	const params = {
		pageindex: state.page -  1,
		limit: state.pageSize,
		id: route.query?.id
	}
	try {
		state.loading = true
		const result = await buildingList(params)
		state.loading = false
		state.list = [...state.list, ...result.data.items]
		state.total = result.data.total
		if (state.page * state.pageSize >= state.total) {
			state.finished = true
		}
		state.page++
	} catch (err) {
		state.loading = false
		state.finished = true
	}
}

const chooseHose = async record => {
  // if ([1, 2].includes(+record?.fwzt)) {
  //   Toast(`该房屋${+record?.fwzt === 1 ? '不出租' : +record?.fwzt === 2 ? '已拆除' : '正常出租'}`)
  //   return
  // }
	await buildingStore.setBuildingInfo(record.fwbh)
	nextTick(() => {
		if (route.query.from === 'menu') {
			router.back()
		} else {
			router.replace({
				name: 'menu',
				query: {
					id: route.query.id
				}
			})
		}
	})
}

const getNumber = async () => {
  const result = await getMonthNumber({
    id: userInfo.value?.qaaId
  })
  if (result?.data) {
    Dialog.confirm({
      message: `上月未自查房屋数：${result?.data}`,
      confirmButtonText: '查看',
    }).then(() => {
      sessionStorage.setItem('monthUncheck', 1)
      router.push({
        name: 'month-unchecked',
      })
    }).catch(() => {
      sessionStorage.setItem('monthUncheck', 1)
    })
  }
}

watch(() => [state.list, route.query.from], () => {
	if (state.list?.length && state.list?.length === 1 && route?.query?.from !== 'menu') {
		chooseHose(state.list[0])
	}
})

onMounted(() => {
  if (+sessionStorage.getItem('monthUncheck') !== 1) {
    getNumber()
  }
})
</script>

<style scoped lang="less">
.building {

}
</style>
